<template>
  <div>
    <van-nav-bar
      title="会员储值"
      left-arrow
      @click-left="onClickLeft"
      fixed
    ></van-nav-bar>
    <!-- 会员储值券 -->
    <van-image class="banner-img" src="/images/member/1.jpeg"></van-image>
    <div class="container">
      <div
        v-for="(item, index) in data"
        :key="index"
        :class="selected == index ? 'value active' : 'value'"
        @click="select(index)"
      >
        <van-image class="img" src="/images/member/2.png"></van-image>
        <div class="price">
          储值<b>{{ item.price }}</b
          >元
        </div>
        <div class="info">
          <p>
            赠<span>{{ item.title }}</span
            ><b>x{{ item.count }}</b>
          </p>
          <p @click="choose">使用说明&nbsp;&gt;</p>
        </div>
        <div class="icon">￥</div>
      </div>
    </div>
    <!-- 使用说明 -->
    <van-action-sheet v-model="show" title="使用说明">
      <div class="content">
        <p>1.储值余额不可提现、不计利息、不可转赠;</p>
        <p>2.储值余额可在奈雪的茶大陆门店、奈雪梦工厂出示会员码或在「奈雪点单|小程序支付时使用;</p>
        <p>3.储值赠券有效期为30天，可在奈雪大陆门店(除机场店
        外)出示会员码或「奈雪点单|小程序购买任意商品享受第2件半价优惠(优惠产品原价不得高于购买产品价格)，限33元及以下商品请在有效期内核销;</p>
        <p>4.开票说明:储值订单支持开票，开具类型为预付卡:使用储值消费的订单储值部分不支持开票。</p>
      </div>
    </van-action-sheet>
    <!-- 同意储值按钮 -->
    <div class="agree">
      <div class="check">
        <input class="radio_type" type="checkbox" name="type" id="radio" />
        <label for="radio"></label>
        <p>我已阅读并同意<b>《奈雪会员储值协议》</b></p>
      </div>
      <button class="btn">立即储值</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 0,
      show: false,
      data: [
        {
          price: 100,
          title: "新品买一赠一券",
          count: 1,
        },
        {
          price: 300,
          title: "单品免费券",
          count: 1,
        },
        {
          price: 200,
          title: "第2件半价券",
          count: 1,
        },
        {
          price: 500,
          title: "第2件半价券",
          count: 3,
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("index");
    },
    select(i) {
      this.selected = i;
    },
    choose() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-icon {
  color: black;
}
.banner-img {
  position: fixed;
  width: 100vw;
  left: 0px;
  top: 46px;
}
.container {
  box-sizing: border-box;
  position: absolute;
  top: 70vw;
  left: 2vw;
  right: 2vw;
  bottom: 28vw;
  overflow: auto;
}
.container .value {
  width: 86vw;
  margin: 4vw auto;
  background-color: #fff;
  border-radius: 2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vw 2vw;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid #fff;
}
.active {
  border: 2px solid #a7d500 !important;
}
.container .value .img {
  width: 12vw;
  position: absolute;
  top: 0;
  left: 0;
}
.container .value .price {
  width: 33vw;
  height: 14vw;
  line-height: 13vw;
  border-right: 1px solid #e2e5e7;
  font-size: 3vw;
}
.container .value .price b {
  font-size: 5vw;
  margin: 0 1vw;
  font-weight: bold;
}
.container .value .info {
  width: 54vw;
  height: 14vw;
  padding-left: 6vw;
  z-index: 1;
}
.container .value .info p {
  font-size: 3vw;
  margin: 2vw 0;
  text-align: left;
}
.container .value .info span {
  margin: 0 1vw;
  font-size: 5vw;
}
.container .value .info b {
  font-size: 5vw;
  font-weight: bold;
}
.container .value .icon {
  width: 16vw;
  height: 13vw;
  font-size: 12vw;
  color: #f1f8d8;
  border-radius: 50%;
  border: 1vw solid #f1f8d8;
  padding-top: 2vw;
  transform: rotate(320deg);
  position: absolute;
  right: -10px;
  bottom: -10px;
  z-index: 0;
}
.content {
  text-align: left;
  padding: 0 5vw 2vw;
  line-height: 6vw;
  font-size: 14px;
}
.agree {
  width: 100vw;
  box-sizing: border-box;
  background-color: #fff;
  padding: 3vw 5vw;
  position: fixed;
  left: 0px;
  bottom: 0px;
}
.agree .check {
  display: flex;
  margin: 1vw 2vw;
}
.agree .check p {
  margin-left: 1vw;
  font-size: 14px;
}
.agree .check b {
  color: #a7d500;
}
.agree .btn {
  width: 90vw;
  height: 12vw;
  border: none;
  border-radius: 10vw;
  background-color: #a7d500;
  margin: 2vw 0;
}
/* 单选换颜色 */
.radio_type {
  appearance: none;
  position: relative;
}
.radio_type:before {
  content: "";
  width: 3vw;
  height: 3vw;
  border: 1px solid #aab84a;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}
.radio_type:checked:before {
  content: "";
  width: 3vw;
  height: 3vw;
  border: 1px solid #a7d500;
  background: #a7d500;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
}
.radio_type:checked:after {
  content: "";
  width: 2vw;
  height: 1vw;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 3px;
  vertical-align: middle;
  transform: rotate(-45deg);
}
</style>
